<form nz-form [formGroup]="validateForm">
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
      <label nz-form-item-required>项目名称</label>
    </div>
    <div nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback>
      <nz-input [(ngModel)]="contractProjectBean.projectName" formControlName="projectName" [nzPlaceHolder]="'请输入项目名称'"></nz-input>
    </div>
    <div>
      <div nz-form-explain *ngIf="getFormControl('projectName').dirty&&getFormControl('projectName').hasError('required')">项目名称不能为空!</div>
    </div>
  </div>

  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
      <label nz-form-item-required>项目地址</label>
    </div>
    <div nz-form-control nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('addresOptions')">
      <nz-cascader formControlName="addresOptions" [nzExpandTrigger]="'hover'" [nzOptions]="options"
                   [(ngModel)]="addresOptions" (nzLoad)="loadData($event)" nzPlaceHolder="请选择行政区划">
      </nz-cascader>
      <div nz-form-explain *ngIf="getFormControl('addresOptions').dirty&&getFormControl('addresOptions').hasError('required')">行政区划不能为空!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
      <label nz-form-item-required>详细地址</label>
    </div>
    <div nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback>
      <nz-input [(ngModel)]="contractProjectBean.projectAddress" formControlName="projectAddress" [nzPlaceHolder]="'请输入项目地址'"></nz-input>
    </div>
    <div>
      <div nz-form-explain *ngIf="getFormControl('projectAddress').dirty&&getFormControl('projectAddress').hasError('required')">项目地址不能为空!</div>
    </div>
  </div>

  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
      <label nz-form-item-required>项目单价</label>
    </div>
    <div nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback>
      <nz-input [(ngModel)]="contractProjectBean.onePrice" formControlName="onePrice" [nzPlaceHolder]="'请输入项目单价'"></nz-input>
    </div>
    <div>
      <div nz-form-explain *ngIf="getFormControl('onePrice').dirty&&getFormControl('onePrice').hasError('required')">项目单价不能为空!</div>
    </div>
  </div>

  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
      <label nz-form-item-required>添加电梯</label>
    </div>
    <div nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback>
      <nz-input [(ngModel)]="contractProjectBean.elevatorIds" [nzType]="'textarea'" [nzRows]="'5'" formControlName="elevatorIds"
                (click)="addElevator(titleElevator, contentElevator, footerElevator)"></nz-input>
    </div>
    <button nz-button nz-col [nzOffset]="2" (click)="clear()"  [nzType]="'primary'"><span>清除</span></button>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
      <label nz-form-item-required>项目开始日期</label>
    </div>
    <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('starTime')">
      <nz-datepicker formControlName="starTime" [nzSize]="'large'" [nzFormat]="'YYYY-MM-DD'" [(ngModel)]="contractProjectBean.starTime"
                     name="starTime" [nzPlaceHolder]="'请输入合同开始日期'"></nz-datepicker>
      至
      <nz-datepicker formControlName="endTime" [nzSize]="'large'" [nzFormat]="'YYYY-MM-DD'" [(ngModel)]="contractProjectBean.endTime"
                     name="endTime" [nzPlaceHolder]="'请输入合同结束日期'"></nz-datepicker>

      <div nz-form-explain *ngIf="getFormControl('starTime').dirty&&getFormControl('starTime').hasError('required')">合同开始日期不能为空!</div>
      <div nz-form-explain *ngIf="getFormControl('endTime').dirty&&getFormControl('endTime').hasError('required')">合同结束日期不能为空!</div>
    </div>
  </div>
  <div nz-form-item nz-row style="margin-bottom:8px;">
    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="10">
      <button nz-button [nzSize]="'large'" (click)="submitForm()" [nzType]="'primary'">修改</button>
    </div>
  </div>
</form>

<!--添加电梯 start -->
<nz-modal [ngClass]="addElevator">
  <ng-template #titleElevator>
    <span>{{modelTitle}}</span>
  </ng-template>
  <ng-template #contentElevator>
    <nz-collapseset>
      <nz-collapse [nzTitle]="panels.name" [nzActive]="panels.active" [nzDisabled]="panels.disabled">
        <form nz-form>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzXs]="2">
              <label>电梯类型</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="4">
              <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true"  [nzSize]="'small'"
                         [(ngModel)]="elevatorInfo.elevatorTypeId" name="elevatorTypeId" [disabled]="false">
                <nz-option *ngFor="let item of elevatorTypes" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
              </nz-select>
            </div>

            <div nz-form-label nz-col [nzXs]="2">
              <label>电梯编号</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="4">
              <nz-input [nzPlaceHolder]="'请输入'" [(ngModel)]="elevatorInfo.elevatorNum" name="planName">
              </nz-input>
            </div>

            <button style="margin-left: 50px"  nz-button  [nzType]="'primary'" (click)="query()">查询</button>
            <button style="margin-left: 20px"  nz-button   [nzType]="'primary'" (click)="saveElevators()">保存</button>
          </div>
        </form>
      </nz-collapse>
    </nz-collapseset>
    <nz-table #nzTable [nzDataSource]="list" nzSize="middle" [nzBordered]="true" [nzIsPagination]="false" (nzDataChange)="displayDataChange($event)">
      <thead nz-thead>
      <tr>
        <th nz-th [nzCheckbox]="true">
          <label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate" (ngModelChange)="checkAll($event)">
          </label>
        </th>
        <th nz-th>
          <span>电梯编码</span>
        </th>
        <th nz-th>
          <span>电梯类型</span>
        </th>
        <th nz-th>
          <span>电梯安装地址</span>
        </th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of list">
        <td nz-td [nzCheckbox]="true">
          <label nz-checkbox [nzDisabled]="data.disabled" [(ngModel)]="data.checked" (ngModelChange)="refreshStatus($event)">
          </label>
        </td>
        <td nz-td>{{data.elevatorNum}}</td>
        <td nz-td>{{data.elevatorTypeName}}</td>
        <td nz-td>{{data.buildAddr}}</td>

      </tr>
      </tbody>
    </nz-table>
    <nz-pagination [nzPageIndex]="elevatorInfo.currentPage" nzShowTotal [nzTotal]="total" nzShowSizeChanger
                   (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)"
                   (nzPageIndexClickChange)="nzPageIndexClickChange($event)" [nzPageSize]="elevatorInfo.pageSize"></nz-pagination>
  </ng-template>
  <ng-template #footerElevator>
    <div>
    </div>
  </ng-template>
</nz-modal>
